<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./vue3.js"></script>
    <div id="app" align="center">
        <div>
            <p>商品编号:<input type="text" v-model="id"></p>
            <p>商品名称:<input type="text" v-model="name"></p>
            <p>商品单价:<input type="text" v-model="price"></p>
            <p>商品数量:<input type="text" v-model="num"></p>
            <button @click="addGood">添加商品</button>
        </div>
        <hr>
        <div>
            请输入关键字: <input type="text" v-model="keyword">
            <button @click="addGoods">搜索商品</button>
        </div>
        <hr>
        <div v-if="goods.length!=0">
            <table border="1">
                <tr>
                    <th>编号</th>
                    <th>
                        全选 <input type="checkbox" v-model="isAll" @change="selectAll">
                        商品名称
                    </th>
                    <th>商品单价</th>

                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in goods" :class="{mybgcolor:(index+1)%2==0}">
                    <td>{{item.id}}</td>
                    <td>
                        <input type="checkbox" v-model="ckList" v-bind:value="item" @change="itemChange">
                        {{item.name}}
                    </td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num--" v-bind:disabled="item.num==1">-</button>
                        {{item.num}}
                        <button v-on:click="item.num++">+</button>
                    </td>
                    <td><button @click="deleteGood(index)">移除</button></td>
                </tr>
            </table>
            购物车商品总价:￥{{totalPrice}}元
        </div>
        <div v-else>
            购物车为空
        </div>
    </div>
    <script>
        const comApp = Vue.createApp({
            data(){
                return {
                    goods: [
                        {
                            id: 1,
                            name: "华为手机",
                            price: 3688,
                            num: 1
                        },
                        {
                            id: 2,
                            name: "苹果手机",
                            price: 5688,
                            num: 1
                        },
                        {
                            id: 3,
                            name: "小米手机",
                            price: 1688,
                            num: 1
                        }
                    ],
                    id: "",
                    name: "",
                    price: "",
                    num: "",
                    keyword: "",
                    isAll: false,
                    ckList: []
                }
            },
            computed: {
                totalPrice() {
                    var total = 0;
                    this.goods.forEach((item) => {
                        total += item.price * item.num;
                    });
                    return total;
                }
            },
            methods: {
                deleteGood(index) {
                    this.goods.splice(index,1);
                },
                addGood(){
                    this.goods.push({
                        id: this.id,
                        name: this.name,
                        price: this.price,
                        num: this.num
                    });
                },
                searchGoods(){
                    var newArr = [];
                    this.goods.gorEach((item) => {
                        if(item.name.indexOf(this.keyword) != -1) {
                            newArr.push(item);
                        }
                    });
                    this.goods = newArr.slice();
                },
                selectAll(){
                    if(this.isAll){
                        this.ckList = this.goods.slice();
                    }
                    else{
                        this.ckList = [];
                    }
                },
                itemChange(){
                    if(this.ckList.length == this.goods.length){
                        this.isAll = true;
                    }else{
                        this.isAll = false;
                    }
                }
            }
        }).mount("#app");
    </script>
</body>
</html>